<template>
  <div class="map-page layout-pd h100">
    <div ref="echartsMapRef" class="h100 el-card is-hover-shadow"></div>
    <div class="map-tool">
      <el-button-group>
        <el-button type="primary">地图</el-button>
        <el-button>卫星</el-button>
        <el-button>地形</el-button>
      </el-button-group>
    </div>
    <div class="map-chart el-card is-hover-shadow">
      <div class="card-item-title">总体情况</div>
      <div style="height: 50%" ref="homePieRef"></div>
      <div style="height: 50%" ref="homeBarRef"></div>
    </div>
  </div>
</template>

<script setup lang="ts" name="home">
import { reactive, onMounted, ref, markRaw, watch, nextTick } from 'vue';
import * as echarts from 'echarts';
import 'echarts/extension/bmap/bmap';
import { echartsMapList, echartsMapData } from '@/views/fun/echartsMap/mock';

import { storeToRefs } from 'pinia';
import { useThemeConfig } from '@/stores/themeConfig';

const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);

// 定义变量内容
const echartsMapRef = ref<RefType>('');
const state = reactive({
	echartsMap: '' as unknown,
	echartsMapList,
	echartsMapData,
});

// echartsMap 将坐标信息和对应物理量的值合在一起
const convertData = (data: EmptyObjectType[]) => {
	let res = [];
	for (let i = 0; i < data.length; i++) {
		let geoCoord = state.echartsMapData[data[i].name];
		if (geoCoord) {
			res.push({
				name: data[i].name,
				value: geoCoord.concat(data[i].value),
			});
		}
	}
	return res;
};
// 初始化 echartsMap
const initEchartsMap = () => {
	const myChart = echarts.init(echartsMapRef.value);
	const option = {
		tooltip: {
			trigger: 'item',
		},
		color: ['#9a60b4', '#ea7ccc'],
		bmap: {
			center: [104.114129, 37.550339],
			zoom: 5,
			roam: true,
			mapStyle: {},
		},
		series: [
			{
				name: 'pm2.5',
				type: 'scatter',
				coordinateSystem: 'bmap',
				data: convertData(state.echartsMapList),
				symbolSize: function (val: any) {
					return val[2] / 10;
				},
				encode: {
					value: 2,
				},
				label: {
					formatter: '{b}',
					position: 'right',
					show: false,
				},
				emphasis: {
					label: {
						show: true,
					},
				},
			},
			{
				name: 'Top 5',
				type: 'effectScatter',
				coordinateSystem: 'bmap',
				data: convertData(
					state.echartsMapList
						.sort(function (a: any, b: any) {
							return b.value - a.value;
						})
						.slice(0, 6)
				),
				symbolSize: function (val: any) {
					return val[2] / 10;
				},
				encode: {
					value: 2,
				},
				showEffectOn: 'render',
				rippleEffect: {
					brushType: 'stroke',
				},
				hoverAnimation: true,
				label: {
					formatter: '{b}',
					position: 'right',
					show: true,
				},
				itemStyle: {
					shadowBlur: 10,
					shadowColor: '#333',
				},
				zlevel: 1,
			},
		],
	};
	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
};

const chart = reactive({
  global: {
    homeChartTwo: null,
    dispose: [null, '', undefined],
  } as any,
  myCharts: [] as EmptyArrayType,
  charts: {
		theme: '',
		bgColor: '',
		color: '#303133',
	},
})
// 饼图
const initPieChart = () => {
	if (!chart.global.dispose.some((b: any) => b === chart.global.homeChartTwo)) chart.global.homeChartTwo.dispose();
	chart.global.homeChartTwo = markRaw(echarts.init(homePieRef.value, chart.charts.theme));
	var getname = ['2024', '2023', '2022', '2021', '2020'];
	var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
	var data = [];
	for (var i = 0; i < getname.length; i++) {
		data.push({ name: getname[i], value: getvalue[i] });
	}
	const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
	const option = {
		backgroundColor: chart.charts.bgColor,
		tooltip: { trigger: 'item', formatter: '{b} <br/> {c}%' },
		graphic: {
			elements: [
				{
					type: 'image',
					z: -1,
					style: {
						image: themeConfig.value.isIsDark
							? ''
							: '',
						width: 220,
						height: 220,
					},
					left: 'center',
					top: 'center',
				},
			],
		},
		legend: {
			type: 'scroll',
			// orient: 'vertical',
			left: 'center',
			top: '10px',
			itemWidth: 14,
			itemHeight: 14,
			data: getname,
			textStyle: {
				rich: {
					name: {
						fontSize: 14,
						fontWeight: 400,
						width: 200,
						height: 35,
						padding: [0, 0, 0, 60],
						color: chart.charts.color,
					},
					rate: {
						fontSize: 15,
						fontWeight: 500,
						height: 35,
						width: 40,
						padding: [0, 0, 0, 30],
						color: chart.charts.color,
					},
				},
			},
		},
		series: [
			{
				type: 'pie',
				radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
				center: ['50%', '50%'],
				itemStyle: {
					color: function (params: any) {
						return colorList[params.dataIndex];
					},
				},
				label: { show: false },
				labelLine: { show: false },
				data: data,
			},
		],
	};
	chart.global.homeChartTwo.setOption(option);
	chart.myCharts.push(chart.global.homeChartTwo);
};

// 柱状图
const initBarChart = () => {
	if (!chart.global.dispose.some((b: any) => b === chart.global.homeCharThree)) chart.global.homeCharThree.dispose();
	chart.global.homeCharThree = markRaw(echarts.init(homeBarRef.value, chart.charts.theme));
	const option = {
		backgroundColor: chart.charts.bgColor,
		tooltip: { trigger: 'axis' },
		legend: { data: ['小麦', '玉米', '水稻'], right: 'center', top: 0, itemWidth: 10 },
		grid: { top: 40, right: 10, bottom: 120, left: 10, containLabel: true },
		xAxis: [
			{
				type: 'category',
				data: ['2024', '2023', '2022', '2021', '2020'],
				boundaryGap: true,
				axisTick: { show: false },
			},
		],
		yAxis: [
			{
				name: '产量',
				// nameLocation: 'middle',
				nameTextStyle: {  },
				splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
				axisLine: { show: false },
				axisTick: { show: false },
				axisLabel: { color: chart.charts.color, formatter: '{value} ' },
			},
			{
				name: '产量',
				// nameLocation: 'middle',
				nameTextStyle: { },
				splitLine: { show: false },
				axisLine: { show: false },
				axisTick: { show: false },
				axisLabel: { color: chart.charts.color, formatter: '{value} ' },
			},
		],
		series: [
			{
				name: '水稻',
				type: 'line',
				smooth: true,
				showSymbol: true,
				// 矢量画五角星
				symbol: 'path://M150 0 L80 175 L250 75 L50 75 L220 175 Z',
				symbolSize: 12,
				yAxisIndex: 0,
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: 'rgba(250,180,101,0.3)' },
						{ offset: 1, color: 'rgba(250,180,101,0)' },
					]),
					shadowColor: 'rgba(250,180,101,0.2)',
					shadowBlur: 20,
				},
				itemStyle: { color: '#FF8000' },
				// data中可以使用对象，value代表相应的值，另外可加入自定义的属性
				data: [
					{ value: 1, stationName: 's1' },
					{ value: 3, stationName: 's2' },
					{ value: 4, stationName: 's3' },
					{ value: 9, stationName: 's4' },
					{ value: 3, stationName: 's5' },
				],
			},
			{
				name: '小麦',
				type: 'line',
				smooth: true,
				showSymbol: true,
				symbol: 'emptyCircle',
				symbolSize: 12,
				yAxisIndex: 0,
				areaStyle: {
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[
							{ offset: 0, color: 'rgba(199, 237, 250,0.5)' },
							{ offset: 1, color: 'rgba(199, 237, 250,0.2)' },
						],
						false
					),
				},
				itemStyle: {
					color: '#3bbc86',
				},
				data: [
					{ value: 31, stationName: 's1' },
					{ value: 36, stationName: 's2' },
					{ value: 54, stationName: 's3' },
					{ value: 24, stationName: 's4' },
					{ value: 22, stationName: 's6' },
				],
			},
			{
				name: '玉米',
				type: 'bar',
				barWidth: 30,
				yAxisIndex: 1,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: 'rgba(108,80,243,0.3)' },
						{ offset: 1, color: 'rgba(108,80,243,0)' },
					]),
					//柱状图圆角
					borderRadius: [30, 30, 0, 0],
				},
				data: [
					{ value: 11, stationName: 's1' },
					{ value: 34, stationName: 's2' },
					{ value: 54, stationName: 's3' },
					{ value: 39, stationName: 's4' },
					{ value: 24, stationName: 's6' },
				],
			},
		],
	};
	chart.global.homeCharThree.setOption(option);
	chart.myCharts.push(chart.global.homeCharThree);
};

const homePieRef = ref()
const homeBarRef = ref()


// 页面加载时
onMounted(() => {
	initEchartsMap();
  setTimeout(() => {
    initPieChart()
    initBarChart()
  })
});

// 监听 pinia 中是否开启深色主题
watch(
	() => themeConfig.value.isIsDark,
	(isIsDark) => {
		nextTick(() => {
			chart.charts.theme = isIsDark ? 'dark' : '';
			chart.charts.bgColor = isIsDark ? 'transparent' : '';
			chart.charts.color = isIsDark ? '#dadada' : '#303133';
			setTimeout(() => {
				initPieChart();
			}, 700);
			setTimeout(() => {
				initBarChart();
			}, 1000);
		});
	},
	{
		deep: true,
		immediate: true,
	}
);
</script>

<style scoped lang="scss">
.map-page {
  position: relative;
}
.map-tool {
  position: absolute;
  top: 24px;
  left: 24px;
}

.map-chart {
  position: absolute;
  right: 24px;
  top: 24px;
  bottom: 24px;
  width: 320px;
}
.card-item-title {
  color: var(--el-text-color-primary);
  font-size: 16px;
  padding: 12px;
  font-weight: 700;
}
</style>
